<template>
  <div class="app-container">
    <el-table :data="productAttributeList" row-key="id" >
      <el-table-column label="序号" >
        <template slot-scope="scope">
          {{ scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column label="商品标题" prop="title" />
      <el-table-column label="可选值列表，以逗号隔开" prop="inputList" />
      <el-table-column label="显示类型" prop="type">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.attribute_show_type" :value="scope.row.type"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAddAttribute(scope.$index)"
            v-hasPermi="['supermarket:productAttribute:add']"
          >新增</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdateAttribute(scope.$index)"
            v-hasPermi="['supermarket:productAttribute:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleteAttribute(scope.$index)"
            v-hasPermi="['supermarket:productAttribute:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改商品属性对话框 -->
    <el-dialog :visible.sync="openAttribute" width="500px" append-to-body>
      <el-form :model="formAttribute" label-width="80px">
        <el-form-item label="商品标题" prop="title">
          <el-input v-model="formAttribute.title" placeholder="请输入商品标题" />
        </el-form-item>
        <el-form-item label="可选值" prop="inputList">
          <el-input v-model="formAttribute.inputList" type="textarea" placeholder="请输入可选值列表，以逗号隔开" />
        </el-form-item>
        <el-form-item label="显示类型" prop="type">
          <el-select v-model="formAttribute.type" placeholder="请选择显示类型">
            <el-option
              v-for="dict in dict.type.attribute_show_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formAttribute.sort" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormAttribute">确 定</el-button>
        <el-button @click="cancelAttribute">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from "sortablejs";

export default {
  name: "EditProductAttribute",
  dicts: ['attribute_show_type'],
  props: {
    // 商品属性列表
    productAttributeList: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      // 是否显示商品属性弹出层
      openAttribute: false,
      // 表单参数
      formAttribute: {},
    }
  },
  
  methods: {
    /** 表单重置 */
    resetAttribute() {
      this.formAttribute = {
        title: null,
        inputList: null,
        type: null,
        sort: null
      };
    },

    /** 新增按钮操作 */
    handleAddAttribute(index) {
      this.resetAttribute();
      this.formAttribute.sort = index;
      this.openAttribute = true;
    },

    /** 修改按钮操作 */
    handleUpdateAttribute(index) {
      this.resetAttribute()
      this.formAttribute = this.productAttributeList[index];
      this.openAttribute = true;
    },
    
     /** 删除按钮操作 */
     handleDeleteAttribute(index) {
      this.resetAttribute()
      this.productAttributeList.splice(index,1);
      this.attributeTableMove();
    },

    /** 提交按钮 */
    submitFormAttribute() {
      let attributeData = this.formAttribute;
      if(attributeData.title==null || attributeData.inputList==null){
        this.$modal.msgError("表单校验未通过，请重新检查提交内容");
        return;
      }
      console.log(attributeData.id);
      if(attributeData.id == null){
        attributeData.id = Math.random();//.toString(36).substring(2,10);
        this.productAttributeList.splice(attributeData.sort,0,attributeData);
      }else{
        this.productAttributeList.forEach(attr => {
          if(attr.id == attributeData.id){
            this.attr = attributeData;
          }
        });
      }
    
      this.openAttribute = false;

      this.attributeTableMove();
    },

    /** 取消按钮 */
    cancelAttribute() {
      this.resetAttribute();
      this.openAttribute = false;
    },

    //商品规格表拖动
    attributeTableMove(){
      setTimeout(() => {

        var el = document.querySelector("#pane-attributeInfo .el-table__body-wrapper tbody");
        const that = this;
        var sortable = new Sortable(el, {
          animation: 350,
          onEnd: function(evt) {
            console.log(evt.oldIndex);
            console.log(evt.newIndex);
            
            const currRow = that.productAttributeList.splice(evt.oldIndex,1)[0];
            that.productAttributeList.splice(evt.newIndex,0,currRow);

            that.attributeTableMove();
          }
        });

      }, 5);
    },

  }
}
</script>